<template>
    <div id="content">
        <div class="left-container">
            <Panel class="panel" title="假设条件">
                <template #content>
                    <Assumption />
                </template>
            </Panel>
            <Panel class="panel" title="思考题">
                <template #content>
                    <ThinkingQuestions />
                </template>
            </Panel>
        </div>

        <div class="center-container">
            <DuNengCircleMap />
        </div>

        <div class="right-container">
            <Panel class="panel" title="参数输入">
                <template #content>
                    <ParameterInput />
                </template>
            </Panel>
            <Panel class="panel" title="地租公式">
                <template #content>
                    <LandRentEquation />
                </template>
            </Panel>
        </div>
    </div>
</template>

<script setup>
import Panel from '@/components/Panel.vue';
import DuNengCircleMap from '@/components/DuNengCircle/DuNengCircleMap.vue';
import Assumption from '@/components/DuNengCircle/Assumption.vue';
import ThinkingQuestions from '@/components/DuNengCircle/ThinkingQuestions.vue';
import ParameterInput from '@/components/DuNengCircle/ParameterInput.vue';
import LandRentEquation from '@/components/DuNengCircle/LandRentEquation.vue';
</script>

<style scoped>
#content {
    width: 100%;
    height: calc(100vh - 13vh);
    display: flex;
    gap: 16px;
    padding: 12px;
    box-sizing: border-box;
    justify-content: center;
}

.left-container,
.right-container {
    flex: 1;
    /* 左右栏等宽 */
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 面板之间的垂直间距 */
}

.center-container {
    flex: 3;

    display: flex;
}

.panel {
    flex: 1;
    /* 确保左右栏的两个面板等高 */
    min-height: 0;
    /* 防止内容溢出 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* 确保地图容器填满中栏 */
.DuNengCircleMap {
    width: 100%;
    height: 100%;
}
</style>